﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Home</title>

    <link href="/css/default.css" rel="stylesheet" />
    <link href="/pages/home/home.css" rel="stylesheet" />
    <script src="/pages/home/home.js"></script>
</head>
<body>

    <div>
        <!-- Template for the group headers -->
        <div id="-header-template" data-win-control="WinJS.Binding.Template" style="display: none">
            <div class="simpleHeaderItem">
                <h1 data-win-bind="innerText: category"></h1>
            </div>
        </div>
        <!-- Template for the items in the zoomed out ListView of the SemanticZoom -->
        <div id="-zoomed-out-template" data-win-control="WinJS.Binding.Template" style="display: none">
            <div class="-zoomed-out-item">
                <h2 class="semanticZoomItem-Text" data-win-bind="innerText: category"></h2>
            </div>
        </div>
    </div>

    <!-- The content that will be loaded and displayed. -->
    <div class="fragment homepage">
        <header aria-label="Header content" role="banner">
            <button class="win-backbutton" aria-label="Back" disabled type="button"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">Home</span>
            </h1>
        </header>
        <section aria-label="Main content" role="main">
            <div id="-credential-zoom" data-win-control="WinJS.UI.SemanticZoom">

                <!-- The zoomed in ListView -->
                <div id="-zoomed-in-credentials"
                    class="win-selectionstylefilled"
                    data-win-control="WinJS.UI.ListView" 
                    data-win-options="{ 
                        selectionMode: 'multi', 
                        tapBehavior: 'invoke'
                    }"
                ></div>

                <!-- The zoomed out ListView -->
                <div id="-zoomed-out-credentials"
                    class="win-selectionstylefilled"
                    data-win-control="WinJS.UI.ListView"
                    data-win-options="{ 
                        selectionMode: 'none', 
                        tapBehavior: 'invoke', 
                        swipeBehavior: 'none' 
                    }"
                ></div>
            </div>
        </section>
    </div>
</body>
</html>
